import 'package:basic_library/basic_library.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

///
/// 多行，含"*"标题+输入框/文本的item
///
class StarTextFieldViewItem extends StatefulWidget {
  final TextEditingController? controller;
  final List<TextInputFormatter>? inputFormatters;
  final FocusNode? focusNode;
  final bool enable;
  final bool enableInteractiveSelection;
  final TextInputType keyboardType;
  final bool isHideStar;
  final Widget? rightWidget;
  final Widget? bottomWidget;
  final String? text;
  final String? holdText;
  final TextAlign textAlign;
  final Function? noEditCallBack;
  final CallBack? callBack;
  final Function? tapInputCallback;
  final TextStyle? style;
  final bool showClear; // 是否显示清除按钮

  const StarTextFieldViewItem({
    Key? key,
    this.controller,
    this.focusNode,
    this.enable = true,
    this.enableInteractiveSelection = true,
    this.keyboardType = TextInputType.text,
    this.isHideStar = false,
    this.rightWidget,
    this.bottomWidget,
    this.text,
    this.holdText,
    this.textAlign = TextAlign.left,
    this.noEditCallBack,
    this.inputFormatters,
    this.style,
    this.showClear = true,
    this.callBack,
    this.tapInputCallback,
  }) : super(key: key);

  @override
  _StarTextFieldViewItemState createState() => _StarTextFieldViewItemState();
}

class _StarTextFieldViewItemState extends State<StarTextFieldViewItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 20),
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(
            width: .5,
            color: Color(0xFFDDDDDD),
          ),
        ),
      ),
      child: Column(
        children: [
          Row(
            children: [
              Text(
                '*',
                style: TextStyle(
                  fontSize: 16,
                  color: widget.isHideStar
                      ? Colors.transparent
                      : const Color(0xFFFF6E6D),
                ),
              ),
              SizedBox(
                width: 80,
                child: Text(
                  widget.text!,
                  style:
                      const TextStyle(fontSize: 16, color: Color(0xFF1D2023)),
                ),
              ),
              const SizedBox(
                width: 24,
              ),
              Expanded(
                child: GestureDetector(
                  onTap: () {
                    if (widget.tapInputCallback != null) {
                      widget.tapInputCallback!();
                    }
                  },
                  child: TextField(
                    textAlign: widget.textAlign,
                    controller: widget.controller,
                    focusNode: widget.focusNode,
                    enabled: widget.enable,
                    maxLines: null,
                    enableInteractiveSelection:
                        widget.enableInteractiveSelection,
                    inputFormatters: widget.inputFormatters,
                    keyboardType: widget.keyboardType,
                    style: widget.style ??
                        const TextStyle(fontSize: 16, color: Colors.black),
                    decoration: InputDecoration(
                      isCollapsed: true, // 高度包裹
                      border: InputBorder.none,
                      hintText: widget.holdText,
                      hintStyle: const TextStyle(
                        fontSize: 16,
                        color: Color(0xFF999999),
                      ),
                    ),
                    onChanged: (value) {
                      if (widget.callBack != null) {
                        widget.callBack!(value);
                      }
                      setState(() {});
                    },
                    onTap: () {
                      if (!widget.enableInteractiveSelection) {
                        FocusScope.of(context).requestFocus(FocusNode());
                        if (widget.noEditCallBack != null) {
                          widget.noEditCallBack!();
                        }
                      }
                    },
                  ),
                ),
              ),
              widget.showClear
                  ? Offstage(
                      offstage: widget.controller!.text != '' ? false : true,
                      child: GestureDetector(
                        onTap: () {
                          setState(() {
                            widget.controller!.text = '';
                          });
                          if (widget.callBack != null) {
                            widget.callBack!("");
                          }
                        },
                        child: Container(
                          height: 13,
                          width: 13,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(30),
                              color: const Color.fromRGBO(161, 165, 169, 1)),
                          child: const Icon(
                            Icons.close_rounded,
                            size: 10,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    )
                  : Container(),
              widget.rightWidget != null
                  ? Container(
                      child: widget.rightWidget,
                    )
                  : Container()
            ],
          ),
          widget.bottomWidget != null
              ? Row(
                  children: [
                    const Text(
                      '*',
                      style: TextStyle(fontSize: 16, color: Colors.transparent),
                    ),
                    Text(
                      widget.text!,
                      style: const TextStyle(
                          fontSize: 6, color: Colors.transparent),
                    ),
                    const SizedBox(
                      width: 24,
                    ),
                    Expanded(child: widget.bottomWidget!),
                  ],
                )
              : Container(),
        ],
      ),
    );
  }
}
